<template>
  <div class="slide_box1">
    <el-button :icon="Close" size="small" class="slider-close-btn" circle @click="handleClose" />
    <div class="slide_innerbox">
      <slide-verify
        class="slide_box"
        ref="block"
        slider-text="向右滑动"
        :accuracy="1"
        @again="onAgain"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :imgs="img"
      ></slide-verify>
      <div class="msgbox" :style="'color:' + fontColor">{{ msg }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import SlideVerify, { SlideVerifyInstance } from 'vue3-slide-verify' //引入滑动验证组件
import 'vue3-slide-verify/dist/style.css' //引入滑动验证组件样式

import slideImg from '../assets/666.jpg'
import slideImg1 from '../assets/sss.jpg'
import slideImg2 from '../assets/login.jpg'
import slideImg3 from '../assets/qtud.png'

import { Close } from '@element-plus/icons-vue'

const msg = ref('')
//自定义图片
const img = ref([slideImg, slideImg1, slideImg2, slideImg3])
const block = ref<SlideVerifyInstance>()
const emit = defineEmits(['again', 'success', 'fail', 'refresh', 'close'])

const fontColor = ref('')

const onAgain = () => {
  msg.value = '检测到非人为操作！'
  fontColor.value = 'red'
  // 刷新
  block.value?.refresh()
}
//成功的回调
const onSuccess = (times: number) => {
  msg.value = '验证通过，耗时' + (times / 1000).toFixed(1) + '秒'
  fontColor.value = 'green'
  emit('success')
}
const handleClose = () => {
  msg.value = ''
  emit('close')
}
//失败的回调
const onFail = () => {
  msg.value = '验证不通过'
  fontColor.value = 'red'

  setTimeout(() => {
    msg.value = ''
  }, 1000)
}
//点击刷新回调
const onRefresh = () => {
  msg.value = ''
}
</script>
<style scoped>
.slide_box1 {
  background: #f9f9f9; /* 改为更柔和的浅灰色背景 */
  padding: 20px; /* 增加内边距，提升整体感 */
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 310px; /* 略微增加宽度 */
  height: 236px;
  border: 1px solid #e0e0e0; /* 使用更柔和的边框颜色 */
  border-radius: 12px; /* 增加圆角，使边框更加圆润 */
  box-shadow: rgba(0, 0, 0, 0.1) 4px 4px 12px; /* 调整阴影，使其更自然 */
  transition: all 0.5s ease; /* 增加过渡效果，使弹出框更平滑 */
}

.slider-close-btn {
  z-index: 100;
  position: absolute;
  right: -10px;
  top: -10px;
  background-color: #fff; /* 为关闭按钮增加背景色 */
  border-radius: 50%; /* 使按钮呈现圆形 */
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px; /* 为按钮增加阴影 */
  transition: transform 0.2s ease; /* 增加按钮的动画效果 */
}

.slider-close-btn:hover {
  transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}

.slide_innerbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 调整内容垂直间距 */
}

.msgbox {
  font-size: 14px;
  margin-top: 10px; /* 增加顶部外边距 */
  text-align: center; /* 文字居中对齐 */
}
</style>


